<template>
  <div>
    <div class="logo">
      <img src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="" />
    </div>
    <van-form>
      <van-field class="ipt" v-model="phone" name="账号" placeholder="请输入账号" />
      <van-field class="ipt" v-model="password" type="password" name="密码" placeholder="请输入密码" />
      <div class="center">
        <div>忘记密码</div>
        <router-link to="/person/register">立即注册</router-link>
      </div>
      <div style="margin: 16px">
        <van-button class="login" round block type="info" native-type="button" @click="goLogin">登录</van-button>
      </div>
      <div class="qt">其他登录方式></div>
    </van-form>
  </div>
</template>
<script>
import { Form, Field, Notify } from "vant";
export default {
  // 组件名字
  name: "GoLogin",
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Notify.Component.name]: Notify.Component,
  },
  // 状态数据
  data() {
    return {
      phone: "",
      password: "",
    };
  },
  methods: {
    // 用户登录的回调
    async goLogin() {
      try {
        await this.$store.dispatch("user/userLogin", {
          phone: this.phone,
          password: this.password,
        });
        console.log(this.$route.query.redirect);
        this.$router.push({ path: "/center" });
      } catch (error) {
        Notify({ type: "warning", message: "用户名或密码错误" });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.logo {
  display: flex;
  flex-direction: column;
  img {
    display: block;
    margin: 0.7467rem auto;
    width: 3.5733rem;
    height: 1.2rem;
  }
}

.ipt {
  height: 1.2267rem;
  margin: 10px 0;
}
.center {
  font-size: 0.3808rem;
  padding: 0 0.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.login {
  background-color: #dd1a21;
  font-size: 0.48rem;
  width: 8.9333rem;
  height: 1.2267rem;
  border-radius: 0.1333rem;
}
.qt {
  margin-top: 2.4rem;
  font-size: 0.48rem;
  text-align: center;
}
</style>
